<template>
	<view class="my">
		<view class="user_avater">
			<view><u-avatar :src="src" ></u-avatar></view>
			<view style="margin-left: 10px;">
				<view class="user_name">亲爱的学者：南卜子</view>
				<view class="user_phone">手机号码：10000000</view>
				<view class="user_vip">会员到期时间：10000000</view>
			</view>
		</view>
		<view>
			<image :src="src" class="courseimage"></image>
		</view>
		<view class="content">
			<view class="gather_more" :class="mediaList.length==0 ? 'gather_more_redio2' : 'gather_more_redio'">
				<view class="gather_more_title" style="color: #000;">学习记录</view>
				<view class="gather_more_title" style="color: #999;">查看更多 <view style="color: #333;margin-left: 5px;">></view></view>
			</view>
			<view class="page-container">
			    <media-list-item 
			      v-for="(item, index) in mediaList" 
			      :key="index"
			      :item="item"
				  :isshow="index==listsize ? true : false"
			      @click="handleItemClick"
			    />
			  </view>
			 
		</view>
	<!--  -->
	<view class="meau">
		<view class="menu_item">
			<view class="menu_name">隐私声明</view>
			<view>
				<image :src="iconrighe" class="meau_image"></image>
			</view>
		</view>
		<view class="menu_item">
			<view class="menu_name">用户协议</view>
			<view>
				<image :src="iconrighe" class="meau_image"></image>
			</view>
		</view>
		<view class="menu_item">
			<view class="menu_name">分享推广</view>
			<view>
				<image :src="iconrighe" class="meau_image"></image>
			</view>
		</view>
		<view class="menu_item">
			<view class="menu_name">联系助教</view>
			<view>
				<image :src="iconrighe" class="meau_image"></image>
			</view>
		</view>
		<view class="menu_item">
			<view class="menu_name">账号注销</view>
			<view>
				<image :src="iconrighe" class="meau_image"></image>
			</view>
		</view>
		
	</view>  
	
	<view class="meau">
		<view class="menu_item_back">
			<view class="menu_name_back">退出登录</view>
		</view>

	</view>  
		  
	</view>
</template>

<script>
	import MediaListItem from '@/components/media-list-item.vue'
	export default {
		components: { MediaListItem },
		data() {
			return {
				src:require("@/static/image/my/persionvip.png"),
				iconrighe:require("@/static/image/my/icon_right_back.png"),
				listsize:2,
				mediaList: [
				        {
				          cover: 'https://picsum.photos/200/200?random=1',
				          title: '滴天髓命理精讲',
				          desc: '八字命理经典著作深度解析课程',
				          progress: 65,
				          tag: '热门'
				        },
				        {
				          cover: 'https://picsum.photos/200/200?random=2',
				          title: '子平真诠实战课',
				          desc: '传统八字命理系统教学',
				          progress: 32,
				          tag: '新课'
				        },
				        {
				          cover: 'https://picsum.photos/200/200?random=3',
				          title: '渊海子平精解',
				          desc: '宋代命理经典著作现代解读',
				          progress: 78
				        }
				      ]
			}
		},
		methods: {
			 handleItemClick(item) {
			      uni.showToast({
			        title: `点击了: ${item.title}`,
			        icon: 'none'
			      })
			    }
		}
	}
</script>

<style scoped lang="scss">
	.my{
		background-color: #f2f2f2;
		height: 145vh;
	}
	.user_avater{
		display: flex;
		flex-direction: row;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		.user_name{
			font-size: 14px;
			color: #000;
		}
		.user_phone{
			font-size: 13px;
			margin-top: 5px;
			color: #666;
		}
		.user_vip{
			font-size: 13px;
			margin-top: 5px;
			color: #666;
		}
	}
	.courseimage{
			display: flex;
			width: 95%;
			height: 110px;
			border-radius: 3px;
			margin-left: 10px;
	}
	.content {
	  margin-top: 30rpx;
	  border-radius: 16rpx;
	  margin-left: 10px;
	  margin-right: 10px;
	  .gather_more{
		  display: flex;
		  background-color: #fff;
		  height: 30px;
		  align-items: center;
		  padding-left: 10px;
		  padding-right: 10px;
		 
		  flex-direction: row;
		  justify-content: space-between;
		  margin-top: 10px;
		  .gather_more_title{
			  font-size: 13px;
			  display: flex;
			  flex-direction: row;
			
		  }
	  }
	  .gather_more_redio{
		   border-radius: 10px 10px 0 0;
	  }
	  .gather_more_redio2{
	  		   border-radius: 10px;
	  }
	  
	 
	}
	.meau{
		margin-top: 20px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: #ffffff;
		padding: 10px;
		border-radius: 10px;
		.menu_item{
			height: 45px;
			border-bottom: 1px solid #F2F2F2;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.menu_name{
				font-size: 13px;
				color: #333;
			}
			.meau_image{
				display: flex;
				width: 5px;
				height: 8px;
			}
		}
		.menu_item_back{
			display: flex;
			justify-content: center;
			align-items: center;
			.menu_name_back{
				color: #FE6867;
				font-size: 13px;
			}
		}
	}
	
</style>
